<!-- 登录页面 -->
<template>
    <div class="page-container">
      <el-row class="el-layout-row" justify="center">
        <!-- 左半边 -->
        <el-col :span="10" class="half-left">
          <el-image style="width: 80%; height: 90%" src="src/assets/img/mult.png" fit="contain" />
        </el-col>

        <!-- 右半边 -->
        <el-col :span="14" class="half-right">
        
          <div class="login-form-container">
            <h1 class="form-title">XXXX 企业管理系统</h1>
            <!-- <el-form :model="form" :rules="rules" label-width="auto" style="max-width: 600px">
              <el-form-item prop="username">
                <div class="form-item-container">
                  <el-text class="form-item-label">工号：</el-text>
                  <el-input placeholder="请输入工号" v-model="form.username" />
                </div>
              </el-form-item>
              <el-form-item>
                <div class="form-item-container">
                  <el-text class="form-item-label">姓名：</el-text>
                  <el-input disabled v-model="form.fullname" />
                </div>
              </el-form-item>
              <el-form-item prop="password">
                <div class="form-item-container">
                  <el-text class="form-item-label">密码：</el-text>
                  <el-input placeholder="请输入密码" v-model="form.password" />
                </div>
              </el-form-item>
              <div class="form-item-container one-right-align">
                <el-button type="primary" class="btn-login" @click="login" style="width:100%">登录</el-button>
              </div>
            </el-form> -->
          
            <el-form :model="formData" :rules="rules" ref="formRef" style="width: 100%;" label-width="70px">
              <el-form-item prop="username" label="工号：">
                <el-input style="width:100%" placeholder="请输入工号" v-model="formData.username" />
              </el-form-item>
              <el-form-item label="姓名：">
                <el-input disabled v-model="formData.fullname" />
              </el-form-item>
              <el-form-item prop="password" label="密码：">
                <el-input placeholder="请输入密码" v-model="formData.password" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" style="width:100%" @click="login">登录</el-button>
              </el-form-item>
            </el-form>

          </div>
      </el-col>
      </el-row>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { userLoginService$ } from '@/api/user'
import { useUserStore } from '@stores'
import { useRouter } from 'vue-router'

const router = useRouter()
const formRef = ref(null)
const formData = reactive({
  username: 'chanchaw',
  fullname: '',
  password: '123456',
})
const rules = {
  username: [
    {required: true, trigger: 'blur', message: '必须填写工号'},
  ],
  password: [
    {required: true, trigger: 'blur', message: '必须填写密码'},
  ]
}

// const login = async formRef => {
//   const res = await formRef.validate((valid,fields) => {
//     if(valid) console.log('表单验证成功')
//     else console.log('表单验证失败：', fields)
//   })
//   console.log('表单验证的结果：', res)
// }
const login = async () => {
  await formRef.value.validate(async (valid,fields) => {
    if(!valid){
      Object.keys(fields).map(key => {
        const item = fields[key]
        for(let rule of item){
          ElMessage.error(rule.message)
        }
      })
      return
    }

    try{
      const res = await userLoginService$(formData)
      const userStore = useUserStore()
      userStore.setToken(res.token)
      
      router.push('/')
      ElMessage.success('登录成功！')
    }catch(err){
      console.log('请求登录出现异常：',err)
    }
  })
  
}

</script>

<style scoped>
.page-container {
    height: 100%;
    width: 100%;
}
.el-layout-row {
  height: 100%;
}
.half-left {
  padding-left: 50px;
  height: 100%;
}

.half-right {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.login-form-container {
  height: 300px;
  width: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}
.btn-login {
  width: 206px;
}
.form-item-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.form-item-text-container {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.form-item-label {
  width: 90px;
}
.form-item-text-captcha {
  width : 100px;
}
.form-item-100w {
  width: 100%;
}
.form-title {
  margin-bottom: 30px;
}
</style>